<template>
  <div class="h100 withMinHeightTbodyBox" ref="strategyTableList">
    <s-table
      :columns="columns"
      :scrollX="900"
      :data="loadData"
      row-key="id"
      class="h100"
      ref="table">
      <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
        <table-ellipsis :text="text || 'hellohellohellohello'" :key="column.dataIndex"></table-ellipsis>
      </template>
      <template slot="name" slot-scope="text,record">
        <auth-text
          @click="doAction('lookupRowDetail', record)"
          :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.view"
        >
          <table-ellipsis :text="text"></table-ellipsis>
        </auth-text>
      </template>
      <template slot="used" slot-scope="text,record">
        <table-ellipsis :text="record.enabled === false ? $t('stoped') : text ? $t('hasUsed') : $t('unUsed')">
        </table-ellipsis>
      </template>
      <template slot="publishTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
      </template>
      <template slot="createTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
      </template>
      <template slot="action" slot-scope="text,record">
        <!-- <operation-menu
          :menus="getTbRowMenus(record)"
          @clickaction="(key) => {
            doAction(key, record)
          }"
        ></operation-menu> -->
        <span style="display: flex;" v-if="!queryParams.fromGcy">
        <auth-button style="margin-right:8px" v-if="!!record.enabled &&!record.used" @click="doAction('editStrategy', record)" type="primary" :ghost="true" size="small" :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.edit" >
          <i class="iconfont icon-xiugai"/>{{ $t('edit') }}
        </auth-button>

        <auth-button style="margin-right:8px" v-if="record.enabled && !record.used" @click="doAction('disabledStrategy', record)" type="danger" :ghost="true" size="small" :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.disabled">
          <a-icon type="stop"/>{{ $t('disabled') }}
        </auth-button>

        <auth-button style="margin-right:8px" v-if="!record.used || record.enabled === false" @click="doAction('deleteList', record)" type="danger" :ghost="true" size="small" :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.delete">
          <i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}
        </auth-button>

        <auth-button style="margin-right:8px" @click="doAction('copyStrategy', record)" type="primary" :ghost="true" size="small" :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.copy" >
          <i class="iconfont icon-fuzhi"/>{{ $t('copy') }}
        </auth-button>

        <auth-button v-if="!record.enabled" @click="doAction('enabledStrategy', record)" type="primary" :ghost="true" size="small" :auth="strategyPerms[versionType][upgradeTriggerType].fotaTjcl.disabled" >
          <a-icon type="check"/>{{ $t('start') }}
        </auth-button>
        </span>
      </template>
    </s-table>
  </div>
</template>
<script>
import { strategyTbColumns, strategyTbRowAction } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import OperationMenu from '@/components/OperationMenu'
import strategyApi from '@/api/modules/strategy'
import { mapState } from 'vuex'
import { STable } from '@/components'
import { strategyPerms } from '@/config/permission/index'
import AuthText from '@/components/AuthText'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    tableEllipsis,
    STable,
    OperationMenu,
    AuthText,
    AuthButton
  },
  inject: ['queryParams'],
  props: {
    versionType: {
      type: String,
      default: ''
    },
    upgradeTriggerType: {
      type: String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    // ...mapState({
    //   queryParams: (state) => state.strategy.queryParams
    // }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    return {
      strategyPerms,
      tbRowMenus: strategyTbRowAction,
      columns: strategyTbColumns
    }
  },
  methods: {
    loadData (parameter) {
      return strategyApi.getStrategyPageData({ ...this.queryParams, type: 2, ...parameter }, this.versionType, this.upgradeTriggerType)
    },
    doAction (key, rowData) {
      // if (this[key]) {
      //   this[key](rowData)
      //   return
      // }
      this.$emit('clickbtn', { type: key, data: rowData })
    },
    // 获取操作每行的菜单
    getTbRowMenus (record) {
      // 是否可用
      const arr = this.tbRowMenus.filter(item => {
        return !(item.disabled && item.disabled(record))
      })
      // 获取按钮对应的权限
      const arr1 = arr.map(item => {
        const auth = item.getAuth ? item.getAuth(record, this) : ''
        const obj = {
          ...item,
          auth
        }
        delete obj.getAuth
        delete obj.disabled
        return obj
      })
      return arr1
    },
    // refreshData (isToFirstPage = true) {
    //   let obj = null
    //   if (isToFirstPage) {
    //     obj = { current: 1 }
    //   }
    //   this.$refs.table.loadData(obj)
    // }
     refreshData (bool=false) {
      this.$refs.table && this.$refs.table.refresh(bool)
    },
  }
}
</script>
